<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>js8.2作业1参考答案</title>
	</head>
	<body>
		<!--获取一组checkbox中被选中的值。并通过console.log显示到浏览器控制台-->
		
		<input type="checkbox" name="hobby" value="1" id="hobby1" /><label for="hobby1">读书</label>
		<input type="checkbox" name="hobby" value="2" id="hobby2" /><label for="hobby2">音乐</label>
		<input type="checkbox" name="hobby" value="3" id="hobby3" /><label for="hobby3">电影</label>
		<input type="checkbox" name="hobby" value="4" id="hobby4" /><label for="hobby4">逛街</label>
		<input type="checkbox" name="hobby" value="5" id="hobby5" /><label for="hobby5">吃喝</label>
		<input type="checkbox" name="hobby" value="6" id="hobby6" /><label for="hobby6">旅游</label>
		
		<button type="button" id="btnGetHobby">获取已选中的爱好</button>
		<script type="text/javascript">
			document.getElementById('btnGetHobby').onclick = function(){
				
				// querySelectorAll 可以根据样式选择器对元素进行选择。
				// 取出input标签name=hobby,并且checked已选中的Dom元素列表
				var checkedHobby = document.querySelectorAll("input[name=\"hobby\"]:checked");
				
				// 循环输出已选中的checkbox的value
				for(var i=0; i<checkedHobby.length; i++){
					console.log(checkedHobby[i].value);
				}
				
			};
		</script>
	</body>
</html>
